<template>
    <div class="DateTime">
      <div class="DateTime--date">
        {{formattedDate}}
      </div>
      <div class="DateTime--week">
        星期{{formattedWeek}}
      </div>
      <div class="DateTime--time">
        {{formattedTime}}
      </div>
    </div>
</template>

<script setup>
import { useNow, useDateFormat } from '@vueuse/core'
const formattedTime = useDateFormat(useNow(), 'HH: mm: ss')
const formattedDate = useDateFormat(useNow(), 'YYYY.MM.DD')
const formattedWeek = useDateFormat(useNow(), 'dd')

</script>

<style lang="scss" scoped>
.DateTime{
  display: flex;
  &--date{
    font-family: PingFangSC-Medium;
    font-size: 16px;
    color: rgba(86, 172, 255,0.8);
    letter-spacing: 1.05px;
    text-align: center;
    font-weight: 500;
    margin-right: 24px;
  }
  &--week{
    font-family: PingFangSC-Medium;
    font-size: 16px;
    color: rgb(86, 172, 255, 0.8);
    letter-spacing: 1.05px;
    text-align: center;
    font-weight: 500;
    margin-right: 24px;
  }
  &--time{
    font-family: PingFangSC-Semibold;
    font-size: 22px;
    color: #D8F0FF;
    letter-spacing: 2px;
    text-align: center;
    text-shadow: 0 0 10px #0091FF;
    font-weight: 600;
  }
}
</style>
